<template>
  <div>
    <el-dialog title="新增" :visible.sync="dialogVisible" width="35%">
      <div style="margin: 20px"></div>
      <el-form
        :label-position="labelPosition"
        label-width="80px"
        :model="formLabelAlign"
        ref="gunForm"
        @submit="sub"
      >
        <el-form-item label="名称">
          <el-input v-model="formLabelAlign.gunName"></el-input>
        </el-form-item>
        <el-form-item label="价格">
          <el-input v-model="formLabelAlign.price" type="number"></el-input>
        </el-form-item>
        <el-form-item label="类型">
          <el-select
            v-model="formLabelAlign.type"
            clearable
            placeholder="请选择"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="sub">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog title="编辑" :visible.sync="dialogVisible1" width="35%">
      <div style="margin: 20px"></div>
      <el-form
        :label-position="labelPosition"
        label-width="80px"
        :model="formLabelAlign"
        ref="gunForm"
        @submit="sub"
      >
        <el-form-item label="名称">
          <el-input v-model="formLabelAlign.gunName"></el-input>
        </el-form-item>
        <el-form-item label="价格">
          <el-input v-model="formLabelAlign.price" type="number"></el-input>
        </el-form-item>
        <el-form-item label="类型">
          <el-select
            v-model="formLabelAlign.type"
            clearable
            placeholder="请选择"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible1 = false">取 消</el-button>
        <el-button type="primary" @click="editsub">确 定</el-button>
      </span>
    </el-dialog>
    <el-container style="border: 1px solid #eee">
      <el-aside style="background-color: rgb(238, 241, 246)">
        <el-menu :default-openeds="['1', '3']">
          <el-submenu index="1">
            <template slot="title"
              ><i class="el-icon-message"></i>导航一</template
            >
            <el-menu-item-group>
              <template slot="title">分组一</template>
              <el-menu-item index="1-1">选项1</el-menu-item>
              <el-menu-item index="1-2">选项2</el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group title="分组2">
              <el-menu-item index="1-3">选项3</el-menu-item>
            </el-menu-item-group>
            <el-submenu index="1-4">
              <template slot="title">选项4</template>
              <el-menu-item index="1-4-1">选项4-1</el-menu-item>
            </el-submenu>
          </el-submenu>
          <el-submenu index="2">
            <template slot="title"><i class="el-icon-menu"></i>导航二</template>
            <el-menu-item-group>
              <template slot="title">分组一</template>
              <el-menu-item index="2-1">选项1</el-menu-item>
              <el-menu-item index="2-2">选项2</el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group title="分组2">
              <el-menu-item index="2-3">选项3</el-menu-item>
            </el-menu-item-group>
            <el-submenu index="2-4">
              <template slot="title">选项4</template>
              <el-menu-item index="2-4-1">选项4-1</el-menu-item>
            </el-submenu>
          </el-submenu>
          <el-submenu index="3">
            <template slot="title"
              ><i class="el-icon-setting"></i>导航三</template
            >
            <el-menu-item-group>
              <template slot="title">分组一</template>
              <el-menu-item index="3-1">选项1</el-menu-item>
              <el-menu-item index="3-2">选项2</el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group title="分组2">
              <el-menu-item index="3-3">选项3</el-menu-item>
            </el-menu-item-group>
            <el-submenu index="3-4">
              <template slot="title">选项4</template>
              <el-menu-item index="3-4-1">选项4-1</el-menu-item>
            </el-submenu>
          </el-submenu>
        </el-menu>
      </el-aside>

      <el-container>
        <el-header style="text-align: right; font-size: 12px">
          <el-dropdown>
            <i class="el-icon-setting" style="margin-right: 15px"></i>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>
                <el-button type="text" @click="dialogVisible = true"
                  >新增<i class="el-icon-circle-plus"></i
                ></el-button>
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <span>{{ user }}</span>
        </el-header>

        <el-main>
          <el-table :data="gunList">
            <el-table-column prop="id" label="序号" width="140">
            </el-table-column>

            <el-table-column prop="gunName" label="名称" width="120">
            </el-table-column>
            <el-table-column prop="price" label="价格" width="140">
            </el-table-column>
            <el-table-column prop="type" label="类型" width="120">
            </el-table-column>
            <el-table-column prop="photo" label="图片" width="120">
              <template v-slot:default="scope">
                <el-image :src="'/api' + scope.row.photo" />
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  @click="handleEdit(scope.$index, scope.row)"
                  >编辑<i class="el-icon-edit-outline"></i>
                </el-button>

                <template>
                  <el-popconfirm
                    title="确定删除？"
                    @confirm="handleDelete(scope.$index, scope.row)"
                  >
                    <el-button slot="reference" size="mini" type="danger">
                      删除<i class="el-icon-delete"></i>
                    </el-button>
                  </el-popconfirm>
                </template>
              </template>
            </el-table-column>
          </el-table>
        </el-main>
        <el-pagination
          background
          layout="prev, pager, next"
          :total="total"
          :page-size="10"
          :current-page="pageNum"
          @current-change="handleCurrentChange"
        >
        </el-pagination>
      </el-container>
    </el-container>
  </div>
</template>


<style scoped>
.el-header {
  background-color: #222325;
  color: #b3c0d1;
  line-height: 60px;
}

.el-aside {
  color: #333;
}
</style>

<script>
export default {
  async mounted() {
    // let res = getData({ url: "/gunlist/findall" });
    await this.get();
    // console.log(res);
  },
  data() {
    return {
      pageNum: 1,
      total: 0,

      user: this.$store.state.user.username,
      gunList: [],
      dialogVisible: false,
      dialogVisible1: false,
      labelPosition: "right",
      formLabelAlign: {
        gunName: "",
        price: "",
        type: "",
      },
      gid: "",
      options: [
        {
          value: "AR",
          label: "突击步枪",
        },
        {
          value: "CB",
          label: "卡宾枪",
        },
        {
          value: "HG",
          label: "手枪",
        },
        {
          value: "SMG",
          label: "冲锋枪",
        },
        {
          value: "SG",
          label: "霰弹枪",
        },
        {
          value: "DMR",
          label: "精确射手步枪",
        },
        {
          value: "SR",
          label: "栓动步枪",
        },
        {
          value: "MJ",
          label: "瞄具",
        },
        {
          value: "PJ",
          label: "配件",
        },
        {
          value: "MGZ",
          label: "弹匣",
        },
        {
          value: "FJ",
          label: "防具",
        },
      ],
    };
  },
  methods: {
    handleCurrentChange(pageNum){
      console.log(pageNum);
      this.pageNum = pageNum
      this.get()
    },

    get() {
      this.$axios({
        url: "/api/gunlist/page",
        method: "get",
        params: {
          pageNum: this.pageNum,
        },
      }).then((res) => {
        console.log(res);
        this.gunList = [];
        this.gunList.push(...res.data.data);
        this.total = res.data.total;
      });
    },
    handleEdit(index, row) {
      this.gid = row.id;
      console.log(this.gid);
      this.dialogVisible1 = true;
    },
    handleDelete(index, row) {
      console.log(row.id);
      this.$axios({
        method: "post",
        url: "/api/gunlist/delItem",
        data: {
          id: row.id,
        },
      }).then((res) => {
        this.get();
      });
    },
    sub() {
      if (
        this.formLabelAlign.gunName != "" &&
        this.formLabelAlign.price != "" &&
        this.formLabelAlign.type != ""
      ) {
        console.log(this.formLabelAlign);

        this.$axios({
          method: "post",
          url: "/api/gunlist/addItem",
          data: {
            gunName: this.formLabelAlign.gunName,
            price: this.formLabelAlign.price,
            type: this.formLabelAlign.type,
          },
        }).then((res) => {
          this.get();
        });

        this.dialogVisible = false;
      } else {
        this.$message("请填写数据");
      }
      this.formLabelAlign.gunName =
        this.formLabelAlign.price =
        this.formLabelAlign.type =
          "";
    },
    editsub() {
      if (
        this.formLabelAlign.gunName != "" &&
        this.formLabelAlign.price != "" &&
        this.formLabelAlign.type != ""
      ) {
        console.log(this.formLabelAlign);
        this.$axios({
          method: "post",
          url: "/api/gunlist/gunUpdata",
          data: {
            id: this.gid,
            gunName: this.formLabelAlign.gunName,
            price: this.formLabelAlign.price,
            type: this.formLabelAlign.type,
          },
        }).then((res) => {
          this.gid = "";
          this.get();
          this.dialogVisible1 = false;
        });
      } else {
        this.$message("请填写数据");
      }
      this.formLabelAlign.gunName =
        this.formLabelAlign.price =
        this.formLabelAlign.type =
          "";
    },
  },
};
</script>